<template>
	<div class="afterloan-main">	
		<section class="section-item">	
			<dy-select></dy-select>
		</section>
		<section class="section-item">	
			<dy-money :opt="moneyData"></dy-money>
		</section>	
		<!-- <section :class="[{'on' : nowTitle.quotaType == 3 }, 'section-item section-table']" v-if="afterloanMajorData" @click="chooseType({name: '整体回款率 (现金循环贷)',quotaType:3})">
			<div class="item-part">
				<chart :options="gauge1" theme="roma"></chart>	
				<div class="gauge-name">整体回款率 (现金循环贷)</div>
			</div>
			<div class="item-part">
				<p v-if="parseInt(afterloanMajorData.repayRatioNDiff) > 0" class="up"><span>+</span> {{afterloanMajorData.repayRatioNDiff}} <i class="icon icon-shangsheng"></i></p>
				<p v-else class="down"><span>-</span>{{afterloanMajorData.repayRatioNDiff}} <i class="icon icon-xiajiang"></i></p>
				<p class="will-pay"><span class="txt-left">目标回款率：</span>{{afterloanMajorData.targetRatioN}}</p>
				<p class="will-pay"><span class="txt-left">目标回款金额：</span>{{numFormat(afterloanMajorData.targetAmountN)}}</p>	
				<p class="actual-pay"><span class="txt-left">实际回款金额：</span>{{numFormat(afterloanMajorData.repayAountN)}}</p>
				<p class="actual-pay"><span class="txt-left">应回款本金：</span>{{numFormat(afterloanMajorData.repayCapitalN)}}</p>
				<p class="will-pay"><span class="txt-left">放款年月：</span>{{afterloanMajorData.repayMonthN}}</p>
			</div>
		</section> -->
		<!-- <section :class="[{'on' : nowTitle.quotaType == 4 }, 'section-item section-table']" v-if="afterloanMajorData" @click="chooseType({name: '整体回款率 (分期产品)',quotaType:4})">
			<div class="item-part">
				<chart :options="gauge2" theme="roma"></chart>	
				<div class="gauge-name">整体回款率 (分期产品)</div>
			</div>
			<div class="item-part">
				<p class="actual-pay">实际回款金额：{{numFormat(afterloanMajorData.repayAountY)}}</p>
				<p class="actual-pay">应回款本金：{{numFormat(afterloanMajorData.repayAountShY)}}</p>
			</div>
		</section> -->
		<section class="section-item">	
			<div class="title">{{nowTitle.name}} </div>	
			<div class="block-tag cc">
				<div :class="[{'on': tagIndex == 1}, 'tag']" @click="chooseTag(1)">近30天</div>
				<div :class="[{'on': tagIndex == 2}, 'tag']" @click="chooseTag(2)">近12月</div>
			</div>
			<chart v-if="Object.keys(line1).length && line1.xAxis[0].data" :options="line1" theme="roma" class="line-charts"></chart>	
			<chart v-if="Object.keys(line2).length && line2.xAxis[0].data" :options="line2" theme="roma" class="line-charts"></chart>	
		</section>
		<section class="section-item">	
			<div class="title" v-if="Object.keys(lineDetail).length">{{nowTitle.name}}分析</div>	
			<dy-line opt="afterloanDetail"></dy-line>	
		</section>
	</div>
</template>
<script>
import dicts from '@/utils/dicts'
import {merge, Event, numFormat} from '@/utils/index'
export default {
	name: 'loans',
    data () {	 
		return {				
			numFormat: numFormat,
			moneyData: {
				row: 3,
				layoutType: 'horizontal',
				api: 'afterloanMajor',
				dict: dicts.dictAfter,
				dateList: [
					{
						name: '',
						dateType: 1,							
					}
				]
			},
			trendPost: {},			
			tagIndex: 1,
			line1: {},
			line2: {},
			gauge1: {},
			gauge2: {},
		}
	},
	computed: {
		nowTitle () {
			return this.$store.getters.nowTitle
		},
		orgId () {
			return this.$store.getters.orgId
		},
		lineDetail () {
			return this.$store.getters.lineDetail
		},
		afterloanMajorData () {
			return this.$store.getters.afterloanMajorData
		}
	},
	watch : {
		orgId ()  {
			this.updata();
		},		
		afterloanMajorData (val) {
			let gauge1 = {series : [ 
    				{
    					axisLine: {           
    						lineStyle: {      
    							color: [[0.5, '#e9666f'], [0.8, '#ffda69'], [1, '#5fda73']]
    						}  
    					},   
    					data : [{ name: '', value: parseFloat((val.repayRatioN.replace('%', ''))).toFixed(0)}]
    				}
    		]}
			let gauge2 = {series : [ 
    				{
    					axisLine: {           
    						lineStyle: {      
    							color: [[0.65, '#e9666f'], [0.85, '#ffda69'], [1, '#5fda73']]
    						}  
    					},   
    					data : [{ name: '', value: parseFloat((val.repayRatioY.replace('%', ''))).toFixed(0)}]
    				}
    		]}
			this.gauge1 = merge(this.gauge, gauge1)
			this.gauge2 = merge(this.gauge, gauge2)
		},
		nowTitle () {			
			this.getTrend();
		}
	},
	mounted () {	
		// 初始化period 、 nowTitle
		this.$store.commit("period", {name: '', val: 1})  		
		this.$store.commit('nowTitle', {quotaType:dicts.dictAfter[Object.keys(dicts.dictAfter)[0]].quotaType, name:dicts.dictAfter[Object.keys(dicts.dictAfter)[0]].name[0]}) 
	},
    methods: {
    	// 更新数据
    	updata () {    		
    		this.getTrend();
    	},    	
    	// 切换九宫格
    	chooseType(nowTitle) {
    		this.$store.commit('nowTitle', nowTitle);
    	},    
    	// 切换 近30天 近12月
    	chooseTag (index) {
    		this.tagIndex = index;
    		this.getTrend();
    	},      	
    	// 趋势报表
    	getTrend () {    	
    		if(!this.orgId || !this.nowTitle.quotaType) return 		
    		this.trendPost = {
    			orgId: this.orgId,
    			period : this.tagIndex,
    			quotaType: this.nowTitle.quotaType
    		}

    		api.afterloanTrend(this.trendPost).then(data => {  
    			// 放数字的图
    			let line1 = {    					
    				legend: {data:[]},		
					xAxis :  [],
					series: []
    			}
				// 放百分率的图
				let line2 = {					
    				legend: {data:[]},		
					series: [],
					xAxis: [],
					yAxis : [
						{
							axisLabel: {
								formatter: function (value, index) {
								    return numFormat(value, "0", true) + '%'
								}
							}
						}
					]
				}

				// 有百分率的情况
				data.reportDetail.map((res, index) => {
					let _data = ''
					// 有百分率的情况
					if(res.yValueList[0].match('%')) {
						_data = []
						res.yValueList.map((r, i) => {
							_data.push(r.replace('%', ''))
						}) 
						if(!line2.xAxis.length) {
							line2.xAxis.push({data : res.xValueList})
						}
						line2.series.push({type: 'line', data: _data || res.yValueList, name: res.quotaTypeName+ ' '}) 
						line2.legend.data.push(res.quotaTypeName + ' ')
					} else {
						if(!line1.xAxis.length) {
							line1.xAxis.push({data : res.xValueList})
						}
						line1.series.push({type: 'line', data: _data || res.yValueList, name: res.quotaTypeName}) 
						line1.legend.data.push(res.quotaTypeName)
					}
				})	
    			this.line1 = merge(this.line, line1)
    			this.line2 = merge(this.line, line2)
			}) 
    	},  
    }
}
</script>
<style lang="less" scope>
@import '../../assets/less/base.less';
.afterloan-main {
	.on {
		background-color: @on-bg;
	}
	.item-part {
		line-height: 1rem;
		text-align: center;	

		.txt-left {
			display: inline-block;
			width: 4.2rem;
			text-align: right;
		}

		&>p {
			&.sum {
				font-weight: bold;
				font-size: .8rem;
			}

			&.up {
				text-align: center;
				margin: 0 0 .4rem;
				color: @up;
				font-size: .9rem;
			}

			&.down {
				color: @down;
				font-size: .7rem;
			}
			
			.icon {
				display: inline-block;
    			vertical-align: top;
				font-size: .7rem;
			}	
			color: @h1-color;
			text-align: left;
			font-size: .6rem;
			line-height: 1rem;
		}
	}

	.line-des {
		margin: .6rem 0 .4rem;
		text-align: center;
	}

	.text {
		color: @h1-color;
		width: 80%;
		margin: 0 auto;	
		text-align: center;

		.text-name {
			display: block;
		}
		.text-num {
			display: block;
		}
	}
	.text-left {
		float: left;
	}
	.text-right {
		float: right;
		&.text-up {
			color: @up;
		}
		&.text-down {
			color: @down;
		}
	}

	.section-item {
		&:nth-child(1) {
			margin-bottom: 0;
		}
	}
	
	.echarts {
		height: 300px;
		&.line-charts {
			padding-bottom: 1rem;
			height: 400px;
		}
	}	
}

</style>